<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {ImageWMS,TileWMS} from 'ol/source'
    import {Image as ImageLayer,Tile as TileLayer} from 'ol/layer';
    export default {
        name: 'ProjectGeoServerWMS',
        data() {
            return {
                map: null,
                options: [ {
                    value: 'image',
                    label: '单张图片'
                }, {
                    value: 'tile',
                    label: 'wms切片'
                }],
            }
        },
        mounted() {
            //单张图片的wms
            this.wmsLayer = new ImageLayer({
                opacity: 1, //图层透明度
                source: new ImageWMS({
                    ratio: 1,
                    url: 'http://localhost:8080/geoserver/guangzhou/wms',
                    params: {'FORMAT': 'image/png',
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "LAYERS": 'guangzhou:gz',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                    }
                })
            });

            //瓦片的wms
            this.tiled = new TileLayer({
                source: new TileWMS({
                    url: 'http://localhost:8080/geoserver/guangzhou/wms',
                    params: {'FORMAT': 'image/png',
                        'VERSION': '1.1.1',
                        tiled: true,
                        "STYLES": '',
                        "LAYERS": 'guangzhou:gz',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                        tilesOrigin: 112.950439453125 + "," + 22.510986328125
                    }
                })
            });
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    /*this.wmsLayer,*/
                   this.tiled
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688],   //视图中心位置
                    projection: 'EPSG:4326',
                    zoom: 5   //缩放到的级别
                })
            });
            this.map.getView().fit([112.950439453125, 22.510986328125,
                114.06005859375, 23.939208984375], this.map.getSize());
        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
    #info{
        position: absolute;
        bottom: .25em;
        z-index: 9999;
    }
</style>
